import Particles from 'particlesjs'

export function useParticleEffects() {
  const particles = Particles.init({
    // 选择canvas画布元素
    selector: '#canvas',
    // 设置最大粒子数
    maxParticles: 100,
    // 设置粒子的移动速度
    speed: 0.8,
    // 设置粒子颜色
    color: '#8ACAFF',
    // 开启点连线
    connectParticles: true,
    // 设置
    minDistance: 140,
    // 设置响应式配置项的调整
    responsive: [
      {
        // 当浏览器窗口宽小于768像素大小采用以下配置
        breakpoint: 768,
        options: {
          maxParticles: 200,
          color: '#9400D3',
          connectParticles: false
        }
      },
      {
        breakpoint: 425,
        options: {
          maxParticles: 100,
          connectParticles: true
        }
      },
      {
        breakpoint: 320,
        options: {
          maxParticles: 0
        }
      }
    ]
  })

  // 销毁
  onBeforeUnmount(() => {
    particles?.destroy()
  })
}
